<template>
  <div class="">
    <a-card :body-style="{ width: '100%', overflow: 'auto' }">
      <div class="h-[300px] w-full">
        <BaseTitle title="今日营业" />
        <div id="dom2" class="h-[270px] min-w-[560px]"><a-empty class="pt-8" /></div>
      </div>
    </a-card>
  </div>
</template>

<script setup>
import { onMounted, ref } from 'vue'
import { message } from 'ant-design-vue'
import echarts from '@/utils/echarts'

const countList = ref({
  jryye: 0,
  jrsfrz: 0,
  jrssl: 0
})
const initRegisterChart2 = async () => {
  const { code, data = [], msg } = await post('/statistic/revenue')
  if (code !== 0) return message.error(msg)
  if (data.length === 0) return
  const xAxisData = data.map((x) => x.itemName)
  const seriesData = data.map((x) => x.count)
  const seriesData2 = data.map((x) => x.peopleCount)
  const registerDom = document.getElementById('dom2')
  if (!registerDom) return
  const registerChart = echarts.init(registerDom)
  registerChart.setOption({
    title: {
      text: `医疗费用￥{value|${countList.value.jryye || 0}}    今日收费人次 {value|${countList.value.jrsfrz || 0}} `,
      textStyle: {
        fontSize: 12,
        rich: {
          value: {
            color: '#5F79F4',
            fontSize: 18
          }
        }
      },
      right: '5%'
    },
    xAxis: {
      type: 'category',
      data: xAxisData,
      axisTick: { show: false },
      axisLabel: { color: '#777', interval: 0, rotate: xAxisData.length > 10 ? 45 : 0 },
      axisLine: { show: false }
    },
    tooltip: {
      trigger: 'axis',
      formatter: function (params) {
        return params[0].marker + `${params[0].name}<br/>金额：&nbsp;&nbsp;${params[0].value}<br/>人次：&nbsp;&nbsp;${seriesData2[params[0].dataIndex]}`
      },
      axisPointer: {
        type: 'shadow'
      }
    },
    yAxis: {
      name: '（元）',
      nameTextStyle: { color: '#aaa' },
      type: 'value',
      axisLabel: { color: '#aaa' },
      axisLine: { show: false },
      splitLine: { show: true, lineStyle: { type: 'dashed' } }
    },
    series: [
      {
        data: seriesData,
        type: 'bar',
        name: '金额',
        barWidth: 12,
        itemStyle: {
          barBorderRadius: [8, 8, 8, 8], //柱形图圆角
          color: '#5F79F4'
        }
      }
    ]
  })
}
const getCount = async () => {
  const { code, data = [], msg } = await post('/statistic/surgeryCount')
  if (code !== 0) return message.error(msg)
  if (data.length === 0) return
  countList.value = data
}
onMounted(async () => {
  await getCount()
  initRegisterChart2()
})
</script>
<style lang="less" scoped>
:deep(.ant-tabs-nav) {
  &::before {
    border-bottom: none;
  }
}
.card-item {
  width: 25%;
  padding: 8px 16px;
  border-radius: 4px;
}
</style>
